<template>
    <!-- 侧边栏 -->
    <index/>
    <div class="pop">
        <img src="../assets/返回.png" class="back" @click="back">
        <div class="code" style="margin-left: 10rem;">
            <span>微信登录</span>
            <img src="../assets/微信.png">  
        </div>
        <div style="border: 1px solid #000000;height: 20rem;"></div>
        <div class="code" style="margin-right: 10rem;">
            <span>QQ登录</span>
            <img src="../assets/QQ.png">  
        </div>
    </div>
</template>

<script setup>
import router from "@/router";
import { onMounted, ref } from "vue";

var recentTime = ref();

onMounted(() => {
    getTime();
});

function getTime() {
    setInterval(() => {
    recentTime.value = new Date();
    }, 1000);
}

function switchQRcode(){
    router.push('/QRcode')
}

function back(){
        router.push('/')
    }
</script>

<style scoped>
template {
    display: flex;
    flex-direction: row;
}

.sidebar {
    width: 9.375rem;
    height: 100vh;
    background-color: rgb(245, 245, 245);
    display: inline-flex;
    flex-direction: column;
}

.avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
}

.button {
    display: inline-flex;
    flex-direction: column;
    align-self: center;
    position: absolute;
    bottom: 1rem;
    left: 3.125rem;
}

.mainbar {
    display: inline-flex;
    flex-direction: column;
    margin-left: 2rem;
}

.mainbutton {
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
    width: 80rem;
}

.singlebutton {
    width: 15.625rem;
    height: 15.625rem;
    border-radius: 1.875rem;
    border: 3px solid rgb(2, 107, 255);
    box-shadow: 0px 4px 4px gray;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.historymeeting {
    margin-top: 2rem;
    width: 100rem;
    display: flex;
    flex-direction: row;
}

.historymeeting table{
    width:40rem;
}

.historymeeting td {
    font-size: 1.5rem;
}

.join {
    width: 6.25rem;
    height: 1.875rem;
    border-radius: 3px;
    background-color: rgb(232, 232, 232);
    border: 1px solid rgb(232, 34, 2);
    cursor: pointer;
}

.pop{
    width: 60rem;
    height: 40rem;
    position: fixed;  
    top: 50%;
    left: 50%;  
    transform: translate(-50%, -50%);
    border-radius: 50px;
    background-color: rgb(245,245,245);
    border:5px solid rgb(224,224,224);
    box-shadow: 0px 4px 10px gray;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.back{
    position: absolute;
    bottom: 2rem;
    left: 2rem;
}

.code{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2.25rem;
}
</style>
